import React, { useState, useRef, useEffect } from 'react'
import { Space, Table, Button, Modal, Form, Input } from 'antd'
import Editor from 'wangeditor'
import { Link } from 'react-router-dom'

// 模拟表格数据
const data = [
  {
    id: 1,
    clazz: '一年级一班',
    name: '张三',
    reason: '牙疼',
    long: '三小时',
    createTime: '2021-01-05 07:07:07'
  }
]

export default function Application() {
  // 表格中的列的定义
  const columns = [
    {
      title: '序号', // 列标题
      dataIndex: 'id', // 数据项（对象）中的属性名
      key: 'id', // 标识，有 dataIndex 的不同设置，可省略
    },
    {
      title: '班级',
      dataIndex: 'clazz',
      responsive: ['xl', 'xxl']
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '原因',
      dataIndex: 'reason'
    },
    {
      title: '请假时长',
      dataIndex: 'long'
    },
    {
      title: '提交时间',
      dataIndex: 'createTime'
    },
    {
      title: '操作',
      key: 'option',
      render(text, record) {
        return (
          <Space>
            <Link to={`/admin/family/detail/${record.id}`}><Button type="primary">详情</Button></Link>
            <Button type="primary">修改</Button>
            <Button type="danger">删除</Button>
          </Space>
        )
      }
    }
  ]
  // 表单实例引用
  const [form] = Form.useForm()
  // 富文本编辑器容器引用
  const editorRef = useRef()
  // 模态对话框显示/隐藏标记
  const [visible, setVisible] = useState(false)

  // 富文本编辑器引用
  const _editorRef = useRef()
  // let editor = null

  // componentDidMount()
  useEffect(() => {
    // 创建富文本编辑器对象
    let editor = new Editor(editorRef.current)
    if (!_editorRef.current) {
      _editorRef.current = editor
    }
    // 配置
    editor.config.height = 100
    editor.config.menus = [
      'bold',
      'fontSize',
      'lineHeight',
      'foreColor',
      'backColor',
      'link',
      'image',
      'table',
    ]
    editor.config.showFullScreen = false
    // 渲染
    editor.create()

    // 设置初始数据
    editor.txt.html(`
      <div data-element="head" er="">
      <h1 id="开始使用">开始使用</h1>
      <p>请查看下级目录的内容。</p>
      <footer class="page-footer"><span class="copyright">Copyright © wangEditor (2020 - present) all right reserved，powered by Gitbook</span><span class="footer-modification">File Modify: 
      2021-01-22 01:03:47
      </span></footer><footer></footer>
      </div>
    `)

    // componentWillUnmount() 销毁资源
    return () => {
      editor.destroy()
      editor = null
      _editorRef.current = null
    }
  }, [])

  return (
    <div>
      <Button type="primary" onClick={() => setVisible(true)}>添加申请</Button>

      <Table
        bordered
        rowKey="id"
        columns={columns}
        dataSource={data}
        style={{marginTop: '12px'}}
      />

      <Modal
        forceRender
        visible={visible}
        title="添加"
        okText="确定"
        cancelText="取消"
        onCancel={() => {
          setVisible(false)
          console.log('取消')
        }}
        onOk={() => {
          form
            .validateFields()
            .then((values) => {
              form.resetFields()
              // 获取富文本编辑器中输入的 html 数据
              const html = _editorRef.current.txt.html()
              console.log('确定', values, html)
              setVisible(false)
            })
            .catch((info) => {
              console.log('Validate Failed:', info)
            })
        }}
      >
        <Form
          form={form}
          name="form_in_modal"
        >
          <Form.Item name="stuNo" label="学号">
            <Input />
          </Form.Item>
          <Form.Item name="clazz" label="班级">
            <Input />
          </Form.Item>
          <Form.Item name="name" label="姓名">
            <Input />
          </Form.Item>
          <Form.Item label="原因" name="reason">
            <Input />
          </Form.Item>
          <Form.Item label="详情说明">
            <div ref={editorRef}></div>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  )
}
